<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="oCanvas" width="500" height="400"></canvas>
    <script src="./cuon-matrix.js"></script>
    <script type="notjs" id="vertex">
        // 存储限定符    数据类型   变量名称
        attribute vec4 a_position;
        attribute vec4 a_color;
        uniform mat4 u_projectMatrix;
        uniform mat4 rotateMatrix;
        uniform mat4 u_viewMatrix;
        varying vec4 f_color;
        void main() {
            gl_Position = u_projectMatrix * u_viewMatrix  * a_position;
            f_color = a_color;
        }
    </script>
    <script type="notjs" id="fragment">
        precision mediump float;
        varying vec4 f_color;
        void main() {
            gl_FragColor = f_color;
        }
    </script>
    <script>
        var oCanvas = document.getElementById('oCanvas');
        var gl = oCanvas.getContext('webgl');

        if (!gl) {
            alert('浏览器不支持webgl');
        }

        function createShader(gl, type, source) {
            // 创建着色器
            var shader = gl.createShader(type);
            // 
            gl.shaderSource(shader, source);
            // 将着色器数据源转化成代码
            gl.compileShader(shader);

            // 判断着色器是否建立完成  
            var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

            if (success) {
                return shader;
            }
            console.log(gl.getShaderInfoLog(shader));
        }
        // gl.VERTEX_SHADER    gl.FRAGMENT_SHADER

        var vertexStr = document.getElementById('vertex').innerText;
        var fragmentStr = document.getElementById('fragment').innerText;

        // 创建着色器
        var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexStr);
        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr);

        function createProgram(gl, vertexShader, fragmentShader) {
            var program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);

            var success = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (success) {
                return program;
            }
            console.log(gl.getProgramInfoLog(program));
        }

        var program = createProgram(gl, vertexShader, fragmentShader);
        gl.useProgram(program);

        var a_position = gl.getAttribLocation(program, "a_position");
        var a_color = gl.getAttribLocation(program, "a_color");
        var u_projectMatrix = gl.getUniformLocation(program, "u_projectMatrix");
        var u_viewMatrix = gl.getUniformLocation(program, "u_viewMatrix")
        var u_rotateMatrix = gl.getUniformLocation(program, 'rotateMatrix');

       
        var vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        var positionData = [
            // 左面   蓝色
            // 0, 0, 0, 0, 0, 1, 1,
            // 0, 1, 0, 0, 0, 1, 1,
            // 0, 1, 5.0, 0, 0, 1, 1,
            // 0, 1, 5.0, 0, 0, 1, 1,
            // 0, 0, 0, 0, 0, 1, 1,
            // 0, 0, 5.0,  0, 0, 1, 1,
            // v1
            0, 0.5, 0, 0, 1, 1,
            // v2
            0, 0.5, 1, 0, 1, 1, 
            // v3
            0, 0, 1, 0, 1, 1, 
            // v3
            0, 0, 1, 0, 1, 1, 
            // v0
            0, 0, 0, 0, 1, 1, 
            // v1
            0, 0.5, 0, 0, 1, 1,


            // 上面 天蓝
            // 0, 1, 0, 0, 1, 1, 1,
            // 0, 1, 5.0, 0, 1, 1, 1,
            // 1, 1, 0, 0, 1, 1, 1,
            // 1, 1, 0, 0, 1, 1, 1,
            // 1, 1, 5.0,  0, 1, 1, 1,
            // 0, 1, 5.0,  0, 1, 1, 1,

            // v1
            0, 0.5, 0, 1, 0, 1, 
            // v4
            0.5, 0.5, 0, 1, 0, 1,
            // v5
            0.5, 0.5, 1, 1, 0, 1,
            // v5 
            0.5, 0.5, 1, 1, 0, 1, 
            // v2
            0, 0.5, 1, 1, 0, 1, 
            // v1
            0, 0.5, 0, 1, 0, 1,

            // 后面 黑色 -

            // 0, 0, 0, 0, 0, 0, 1,
            // 1, 0, 0, 0, 0, 0, 1,
            // 1, 1, 0, 0, 0, 0, 1,
            // 1, 1, 0, 0, 0, 0, 1,
            // 0, 1, 0, 0, 0, 0, 1,
            // 0, 0, 0, 0, 0, 0, 1,
            // v1
            0, 0.5, 0, 0, 0, 1, 
            // v4
            0.5, 0.5, 0, 0, 0, 1,
            // v0
            0, 0, 0, 0, 0, 1, 
            // v0
            0, 0, 0, 0, 0, 1,
            // v6
            0.5, 0, 0, 0, 0, 1,
            // v4
            0.5, 0.5, 0, 0, 0, 1,





            // 右面  红色  -
            // 1, 0, 0, 1, 0, 0, 1,
            // 1, 1, 0, 1, 0, 0, 1,
            // 1, 0, 5.0, 1, 0, 0, 1,
            // 1, 0, 5.0, 1, 0, 0, 1,
            // 1, 1,5.0, 1, 0, 0, 1,
            // 1, 1, 0, 1, 0, 0, 1,
            // v4
            0.5, 0.5, 0,0, 0, 1, 
            // v5
            0.5, 0.5, 1,0, 0, 1, 
            // v6
            0.5, 0, 0,0, 0, 1,
            // v6
            0.5, 0, 0,0, 0, 1, 
            // v7
            0.5, 0, 1,0, 0, 1,
            // v5
            0.5, 0.5, 1,0, 0, 1,

            // 前面 玫粉色 -

            // 0, 0, 5.0, 1, 0, 1, 1,
            // 0, 1, 5.0, 1, 0, 1, 1,
            // 1, 0, 5.0, 1, 0, 1, 1,
            // 1, 0, 5.0, 1, 0, 1, 1,
            // 1, 1, 5.0, 1, 0, 1, 1,
            // 0, 1, 5.0, 1, 0, 1, 1,
            // v5
            0.5, 0.5, 1, 0, 0, 1, 
            // v2
            0, 0.5, 1, 0, 0, 1, 
            // v3
            0, 0, 1, 0, 0, 1,
            // v3
            0, 0, 1, 0, 0, 1, 
            // v5
            0.5, 0.5, 1, 0, 0, 1, 
            // v7
            0.5, 0, 1, 0, 0, 1,


            // 下面 黄色 -

            // 0, 0, 0,  1, 1, 0, 1,
            // 0, 0, 5.0, 1, 1, 0, 1,
            // 1, 0, 0, 1, 1, 0, 1,
            // 1, 0, 0, 1, 1, 0, 1,
            // 1, 0, 5.0, 1, 1, 0, 1,
            // 0, 0, 5.0, 1, 1, 0, 1,
            // v7
            0.5, 0, 1, 0, 0, 1 ,
            // v6
            0.5, 0, 0, 0, 0, 1,
            // v3
            0, 0, 1,0, 0, 1, 
            // v3
            0, 0, 1,0, 0, 1, 
            // v6
            0.5, 0, 0, 0, 0, 1,
            // v0
            0, 0, 0, 0, 0, 1, 
        ];
        // var positionData = [
            // 0.75, 1.0, -4.0, 0.4, 1.0, 0.4,
            // 0.24, -1.0, -4.0, 0.4, 1.0, 0.4,
            // 1.25, -1.0, -4.0, 1.0, 0.4, 0.4,

            // 0.75, 1.0, -2.0, 1.0, 1.0, 0.4,
            // 0.25, -1.0, -2.0, 1.0, 1.0, 0.4,
            // 1.25, -1.0, -2.0, 1.0, 0.4, 0.4,


            // 0.75, 1.0, 0.0, 0.4, 0.4, 1.0,
            // 0.25, -1.0, 0.0, 0.4, 0.4, 1.0,
            // 1.25, -1.0, 0.0, 1.0, 0.4, 0.4,

            // // 左侧的三个三角形
            // -0.75, 1.0, -4.0, 0.4, 1.0, 0.4,
            // -1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
            // -0.25, -1.0, -4.0, 1.0, 0.4, 0.4,

            // -0.75, 1.0, -2.0, 1.0, 1.0, 0.4,
            // -1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
            // -0.25, -1.0, -2.0, 1.0, 0.4, 0.4,


            // -0.75, 1.0, 0.0, 0.4, 0.4, 1.0,
            // -1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
            // -0.25, -1.0, 0.0, 1.0, 0.4, 0.4,


            // ];

        // var indices = new Uint8Array([
        //     1, 2, 3, 3, 0, 1,
        //     1,4 ,5, 5, 2, 1,
        //     1, 4, 0, 0, 6, 4,
        //     4, 5, 6, 6, 7, 5,
        //     5, 2, 3, 3, 5, 7,
        //     7, 6,3, 3, 6, 0,
        // ]);
        // var indexBuffer = gl.createBuffer();
        // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
        var projectMatrix = new Matrix4();
        var viewMatrix = new Matrix4();
        viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
        projectMatrix.setPerspective(45, oCanvas.width / oCanvas.height, 1, 100);
        gl.uniformMatrix4fv(u_projectMatrix, false, projectMatrix.elements);
        gl.uniformMatrix4fv(u_viewMatrix, false, viewMatrix.elements);
        var rotateMatrix = new Matrix4();
        function draw(deg) {
            gl.enable(gl.DEPTH_TEST);
            rotateMatrix = rotateMatrix.rotate(deg, 0, 1, 0);
            gl.uniformMatrix4fv(u_rotateMatrix, false, new Float32Array(rotateMatrix.elements));
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionData), gl.STATIC_DRAW);
            gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 4 * 6, 0);
            gl.enableVertexAttribArray(a_position);
            gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, 4 * 6, 4 * 3);
            gl.enableVertexAttribArray(a_color);
            // gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
            gl.drawArrays(gl.TRIANGLES, 0, 36);
        }
        var deg = 0;
        var id = null;
        function rotate() {
            console.log(deg)
            draw(deg);
            deg = (deg + 1) % 180;
            console.log(deg);
            if (deg > 90) {
                cancelAnimationFrame(id);
            } else {
                // id = requestAnimationFrame(rotate);
            }



        }

        rotate()



    </script>
</body>

</html>
